<template>
  <view
    :ref="editorRef"
    :class="[
      ns.b(),
      readonly ? ns.m('readonly') : '',
      disabled ? ns.m('disabled') : '',
    ]"
  >
    <uni-datetime-picker :value="date" @change="onChange"/>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { Ref, ref, watch } from "vue";
import { getDatePickerProps, getEditorEmits } from "@/props";
import { useNamespace, useFocusAndBlur } from "@/use";
import { DatePickerEditorController } from "./i-biz-date-picker.controller";
import dayjs from "dayjs";

const props = defineProps(getDatePickerProps<DatePickerEditorController>());
const emit = defineEmits(getEditorEmits());

const c = props.controller;
const ns = useNamespace("date-picker");
// 聚焦失焦事件
const { componentRef: editorRef } = useFocusAndBlur(
  () => emit("focus"),
  () => emit("blur")
);

const date = ref();

const onChange = (value: string) => {
  console.log(value);
  date.value = value;
  emit('change', value);
}
</script>
<style lang="scss">
// @include b("date-picker") {
// }
</style>
